<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<style>
    @media (max-width: 600px) {
        .span{
            display: none;
        }
        a:hover{
          color:  red;
            width: 150px;
        }
        a{
            width: 60px;
        }
        /*.container{
            position: relative;
        }
        .sidebar{
            position: absolute;
        }*/

    }
    @media(min-width: 600px){
        a{
            width: 150px;
        }
    }
    .container{
        display: flex;
    }
  a{
    color: black;
    background: pink;
    display: block;
    text-decoration: none;
      padding: 5px 20px;
      margin: 0 60px;
      box-sizing: border-box;
  }
  a:hover{
    background:white;
  }
  .sidebar{

    display: inline-block;
  }
  .material-icons{
      vertical-align: -25%;
  }
</style>
<body>
<div class="container">
<div class="sidebar">
    <a href=""><i class="material-icons">dashboard</i><span class="span">Dashboard</span></a>
  <a href=""><i class="material-icons">computer</i><span class="span">Computer</span></a>
  <a href=""><i class="material-icons">timelapse</i><span class="span">Timelapse</span></a>
  <a href=""><i class="material-icons">style</i><span class="span">Style</span></a>
  <a href=""><i class="material-icons">today</i><span class="span">Date</span></a>


</div>
<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid atque culpa debitis deleniti, dicta
        eligendi et facilis impedit magni, minima nemo nihil numquam officia quam, quia suscipit temporibus vel.

</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(function () {
        $(".sidebar").hover(function () {
            $(".span").toggle(1000,function () {
               $(this).val() ;
            });
        })
    })
</script>
</body>
</html>